<template>
  <div class="box padd10">
        <div class="left">
            <!-- 输入盒子 -->
            <div class="intBox padd10">
                <div class="item">
                    <span class="info">姓名</span>
                    <input type="text" id="name" v-model.trim="name">
                </div>
                <div class="item">
                    <span class="info">评分</span>
                    <input type="number" id="score" v-model.number="score">
                </div>
                <div class="item">
                    <span class="info">薪资</span>
                    <input type="number" id="money" v-model.number="salary">
                </div>
                <div class="btn" id="add" @click="add">新增</div>
            </div>
            <!-- 列表 -->
            <div class="list">
                <div class="title">
                    <span class="item">姓名</span>
                    <span class="item">评分</span>
                    <span class="item">薪资（单位:万）</span>
                    <span class="item">操作</span>
                </div>
                <div class="listBox" id="list">
                  <!-- editMode 动态控制input框显示和隐藏 -->
                    <div class="one" v-for="item in list" :key="item.id" :class="{editMode:currentId===item.id}">
            <span class="item">
              <span class="info">{{item.name}}</span>
            <input type="text" class="ipt" v-model.trim="currentName">
            </span>
            <span class="item">
              <span class="info">{{item.score}}</span>
            <input type="number" class="ipt" v-model.number="currentScore">
            </span>
            <span class="item">
              <span class="info">{{item.salary}}</span>
            <input type="number" class="ipt" v-model.number="currentSalary">
            </span>
            <span class="item">
              <i class="upd" @click="upd(item)"></i>
              <i class="del" @click="del(item.id)"></i>
              <i class="yes" @click="yes(item)"></i>
              <i class="no" @click="no"></i>
            </span>
          </div>
                </div>
            </div>
        </div>
        <div class="right">
            <div class="item" id="up"></div>
            <div class="item" id="down"></div>
        </div>
    </div>
</template>

<script>
export default {
   data(){
     return {
       list:JSON.parse(localStorage.getItem('money')) || [],
       name:'',
       score:'',
       salary:'',
       currentId:'',
       currentName:'',
       currentScore:'',
       currentSalary:''
     }
   },
   methods:{
     del(id){
      this.list = this.list.filter(item=>item.id !== id)
     },
     add(){
       this.list.push({
         id:Date.now(),
         name:this.name,
         score:this.score,
         salary:this.salary
       }),
       this.name='',
       this.score=''
       this.salary=''
     },
     upd(item){
       this.currentId = item.id,
       this.currentName = item.name,
       this.currentScore = item.score,
       this.currentSalary = item.salary
     },
     no(){
       this.currentId = ''
     },
     yes(item){
       item.name = this.currentName
       item.score = this.currentScore
       item.salary = this.currentSalary
       this.currentId = ''
     }
   },
   watch:{
     list:{
       handler(value){
         localStorage.setItem('money',JSON.stringify(value))
       },
       deep:true
     }
   }
}
</script>

<style>

</style>